/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *     http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import "theme-mixin";


.themeMixin({
  .notebook-container {
    background: @layout-body-background;
    display: block;
    position: relative;
    padding-top: 60px;
    min-height: calc(~"100vh - 50px");

    &.simple {
      background: @component-background;
    }
  }

  .flex-container {
    display: flex;
  }

  .sidebar-area {
    box-shadow: 4px 0px 2px 0 rgba(0, 0, 0, 0.06);
    border-right: solid thin @component-background;
    overflow: hidden;
    background: @component-background;
    z-index: 25;
    position: sticky;
    top: 0px;
    height: 100vh;
  }

  .sidebar-resize {
    height: 100%;
    width: 5px;
    transition: all 0.2s ease;

    &:hover {
      border-right: solid 2px #5d99f8;
    }
  }

  .simple .sidebar-area {
    box-shadow: none;
    
    &:hover {
      border-right: solid thin rgba(0, 0, 0, 0.06);
    }
  }
  
  .notebook-area {
    overflow: hidden;
    width: 100%;
  }

  .extension-area {
    padding: 24px;
    background: @component-background;
    box-shadow: -2px 4px 2px 0 rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0px;
    z-index: 20;
  }

  .paragraph-area {
    padding: 0 5px;
  }
});
